import React from 'react';
import { Modal, message, Empty } from 'antd';
import cass from 'classnames';
import s from './index.module.less';
import chatServer from '../../../services/chat';
import isSuccess from '../../../utils/error';

const { questionsList, answersList } = chatServer;

class CommonLangModal extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            qList: [],
            aList: [],
            leftActiveIndex: 0,
            rightActiveIndex: 0
        }
    }

    componentWillMount() {
        this.getQuestionsList();
    }

    getQuestionsList = async () => {
        const res = await questionsList();
        if (isSuccess(res) && res.data && res.data[0]) {
            // 初始化默认数据
            this.getAnswersList({ questionid: res.data[0].recid });
            this.setState({ qList: res.data, leftActiveIndex: 0, rightActiveIndex: 0 })
        }
    }

    getAnswersList = async (params) => {
        const res = await answersList(params);
        if (isSuccess(res) && res.data) {
            this.setState({ aList: res.data || [] })
        }
    }

    handleCancel = () => {
        this.getQuestionsList();
        this.props.onCancel();
    }

    handleOk = () => {
        const { aList, rightActiveIndex } = this.state;
        if (!aList || !aList.length || !aList[rightActiveIndex].answer) {
            message.warn('未选择常用语不可以提交');
            return;
        };
        this.props.onOk(aList[rightActiveIndex].answer);
        this.handleCancel()
    }

    selectLeft = (v, i) => {
        this.getAnswersList({ questionid: v.recid });
        this.setState({ leftActiveIndex: i, rightActiveIndex: 0 });
    }

    selectRight = (i) => {
        this.setState({ rightActiveIndex: i });
    }

    render() {
        const { visible, title } = this.props;
        const { qList, aList, leftActiveIndex, rightActiveIndex } = this.state;

        return (
            <Modal
                title={title}
                width={700}
                okText="复制到输入框"
                cancelText="取消"
                visible={visible}
                maskClosable={false}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                wrapClassName={s.wrapInnerModal}
            >
                <div className={s.innerWrap}>
                    <div className={s.left}>
                        <div className={s.leftTitle}>常见问题</div>
                        {
                            qList.length ? (
                                <div className={s.leftWrap}>
                                    {qList.map((v, i) => (
                                        <div
                                            key={v.recid}
                                            onClick={() => this.selectLeft(v, i)}
                                            className={cass(s.item, 'hovergray', { [s.active]: leftActiveIndex === i })}
                                        >
                                            {i + 1}、{v.question}
                                        </div>
                                    ))}
                                </div>
                            ) :
                                <div className={s.empty}><Empty description={`暂无设置常用语`} /></div>
                        }
                    </div>
                    <div className={s.right}>
                        <div className={s.rightTitle}>参考回答</div>
                        {
                            aList.length ? (
                                <div className={s.rightWrap}>
                                    {aList.map((v, i) => (
                                        <div key={v.recid} className={cass(s.item, 'hovergray')} onClick={() => this.selectRight(i)}>
                                            {v.answer}
                                            <div className={s.logo}>
                                                {i === rightActiveIndex ? <span className="mdi mdi-checkbox-marked-circle" /> : <span className="mdi mdi-checkbox-blank-circle-outline" />}
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            ) :
                                <div className={s.empty}><Empty description={`暂无相应回答`} /></div>
                        }
                    </div>
                </div>
            </Modal>
        );
    }
}

export default CommonLangModal